<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<body>
<style type="text/css">
#curriculumPlanHome{
	padding: 15px;
	background: #fff;
	border-radius: 10px;
} 
</style>
<div id="curriculumPlanHome">
	<fieldset class="layui-elem-field layui-field-title site-title">
		<legend><a name="use">课程安排</a></legend>
	</fieldset>
	<form id="veditForm" method="post" class="layui-form white-bg radius">
		<div class="layui-inline">
			<label class="layui-form-label">选择班级</label>
			<div class="layui-input-block" style="width: 260px">
				<select lay-filter="tbClassName" id = "tbClassName" name="tbClassName" lay-verify="required"
					lay-search>
					<c:forEach var="d" items="${tbClass}">
						<option value="${d.id }">${d.name}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="layui-inline" style="margin-left: 35px;">
			<div class="layui-input-inline">
				<button type="button" class="layui-btn layui-btn-danger" onclick="derive()">导出课程</button>
			</div>
		</div>
		
		<i class="layui-icon layui-icon-add-circle" style="float:right;margin:10px 0;font-size:30px;color:#5FB878;cursor:pointer" title="增加一个" onclick="addRow()"></i>
		<div id="preview">
			<table class="layui-table" lay-even lay-skin="nob">
				<thead>
					<tr>
						<th>日期</th>
						<th>时间</th>
						<th>课程</th>
						<th>&nbsp;</th>
					</tr> 
				</thead>
				<tbody id="lesson_body">
				</tbody>
			</table>
		</div>
		<input type="button" class="layui-btn" lay-submit lay-filter="formDemo" onclick = "save()" id="btn_sub" value="确认排课" />
		<input type="button" class="layui-btn layui-btn-primary" onclick="preview()" value="排课预览" />
	</form>
	
	<table id="trData" style="display: none;">
		<tr>
			<input type="hidden" class="id" >
			<td width="120px"><input type="text" class="layui-input lessdate startdata" name="startdata" style="width:120px"></td>
			<td width="180px"><input type="text" class="layui-input test finishtime" name = "finishtime" placeholder=" - "></td>
			<td>
				<select class="curriculum" lay-verify="required"
					lay-search>
					<option></option>
					<c:forEach var="d" items="${kc}">
						<option value="${d.id }">${d.courseName}(${d.teacher.name})</option>
					</c:forEach>
				</select>
			</td>
			<%-- <td>
				<input type="text" class="layui-input" name = "rs">
				<select class="teacher" lay-verify="required"
					lay-search>
					<c:forEach var="d" items="${teacher}">
						<option value="${d.id }">${d.name}</option>
					</c:forEach>
				</select>
				
			</td> --%>
			<td><i class="layui-icon layui-icon-close-fill" style="font-size:30px;color:#FF5722;cursor:pointer" onclick="delRow(this)"></i></td>
		</tr>
	</table>
	
	<script type="text/javascript">
		refresh()
		
		function refresh(){
			layui.use('form', function(){
			  	var form = layui.form;
			  	form.render('select');
			});
			
			layui.use('laydate', function(){
		        var laydate = layui.laydate;
				
		        //时间范围
		        $('#lesson_body td .test').each(function(){
			        laydate.render({
			            elem: this
			            ,type: 'time'
			            ,range: true
			        });
		        })
		        
		        $('#lesson_body td .lessdate').each(function(){
			        laydate.render({
						elem: this
					});
		        });

		    });
		}
		
		function delRow(obj){
			$(obj).parentsUntil("tr").parent().remove();
		}
		
		function addRow(){
			var html = $('#trData').html();
			html = html.substring(10, html.length);
			html = html.substring(0, html.length-10);
			$("#lesson_body").append(html);
			refresh()
		}
		
		$(function(){
			var tbClassId = $("#tbClassName").val();
			tbClassKcData(tbClassId);
			
			layui.use('form', function(){
				var form = layui.form;
				form.render('select');
				form.on('select(tbClassName)', function(data){
					var id = data.value;
					tbClassKcData(id);
				})
			})
		})
		
		function tbClassKcData(id){
			$.post("${pageContext.request.contextPath }/curriculumPlan/tbClassKcData", {id: id}, function(data){
				$("#lesson_body").html("");
				data = data.substring(11, data.length);
				data = data.substring(0, data.length-11);
				$("#lesson_body").append(data);
				refresh()
			})
		}
		
		function save(){
			var tbClassId = $("#tbClassName").val();
			var str = "[";
			$("#lesson_body").each(function(){
				$(this).find('tr').each(function(){
					str += '{"id":"'+$(this).find(".id").val()+'",';
					str += '"startdata":"'+$(this).find(".startdata").val()+'",';
					str += '"finishtime":"'+$(this).find(".finishtime").val()+'",';
					str += '"curriculum1":"'+$(this).find(".curriculum").val()+'",';
					str += '"teacher1":"'+$(this).find(".teacher").val()+'"},';
				})
			});
			str = str.substring(0, str.length-1)+"]";
			$.post("${pageContext.request.contextPath }/curriculumPlan/save1", {data: str, tbClassId: tbClassId}, function(data){
				if(data.success){
					layer.msg("保存成功",{offset:'rb'});
				}else{
					layer.msg("保存失败",{offset:'rb'});
				}
			})
		}
		
		function preview(){
			var tbClassId = $("#tbClassName").val();
			$.post("${pageContext.request.contextPath }/curriculumPlan/preview", {id: tbClassId}, function(data){
				 layer.open({
			    	  type:1,
			    	  title:'排课预览',
			    	  area: ['95%', '95%'],
			    	  content:data,
			    	  maxmin: true
				 });
			})
		}
		
		function derive(){
			var tbClassId = $("#tbClassName").val();
			window.location.href="${pageContext.request.contextPath }/curriculumPlan/derive?id="+tbClassId;
		}
	</script>
</div>
</body>
